<template>
  <div class="bg-[#f7f7f7] flex flex-col lg:gap-12 gap-4">
    <!-- 顶部图 -->
    <!-- 顶部图 -->
    <!-- 顶部图 -->
    <div
      class="lg:h-[28.13rem] aspect-[23/7] max-lg:p-4 w-full bg-[url('https://cd.sealmg.com/assets/img/bj_contact.png')] bg-no-repeat bg-cover bg-center flex flex-col justify-center lg:gap-4 gap-2 items-center"
    >
      <h1 class="font-semibold lg:text-[3rem] text-white text-[1.25rem] capitalize">Contact Us</h1>
      <p class="lg:text-[1.25rem] text-white text-[0.63rem] capitalize">Contact us if you have any issues!</p>
      <div class="lg:size-[5.63rem] size-8 cursor-pointer bg-[#FF4E33] rounded-full lg:mt-12 flex justify-center items-center">
        <i class="el-icon-bottom lg:text-3xl text-base text-white"></i>
      </div>
    </div>
    <!--  -->
    <!--  -->
    <!--  -->
    <div class="lg:px-0 lg:gap-12 flex flex-col gap-4 px-4 mx-auto max-w-7xl" id="ddddd">
      <div class="lg:grid-cols-2 grid overflow-hidden grid-cols-1 bg-white rounded-2xl">
        <div class="col-span-1">
          <img src="https://cd.sealmg.com/assets/img/card.png" loading="lazy" alt="Contact support card" title="Customer support information" />
        </div>
        <div class="lg:p-8 flex flex-col col-span-1 gap-4 p-4">
          <div class="font-medium lg:text-[1.5rem] text-black text-[1rem]">- Contact Customer Support：</div>
          <div class="font-medium lg:text-[1rem] text-[#999999] text-[0.75rem] capitalize">
            Click the live chat icon at the bottom right of your screen for instant help, 9am - 11pm (UTC+08:00)!
          </div>
          <div>
            <div
              @click="openCustomerService"
              class="lg:py-3 px-4 py-2 bg-[#FF4D32] rounded-[1.63rem] inline-flex cursor-pointer max-lg:w-full justify-center items-center"
            >
              <span class="font-medium lg:text-[1rem] text-white text-[0.75rem]"> Live Chat </span>
            </div>
          </div>
        </div>
      </div>
      <div class="lg:grid-cols-3 grid overflow-hidden grid-cols-1 gap-4">
        <div class="flex flex-col col-span-1 gap-4 justify-center">
          <div class="font-medium lg:text-[1.5rem] text-[1rem] text-black">- Email：</div>
          <div class="font-medium lg:text-[1rem] text-[0.75rem] text-[#999999]">
            You may contact us through email for further inquiries or assistance.
          </div>
        </div>
        <div class="lg:pt-8 col-span-1 pt-4" v-for="(i, index) in list" :key="index">
          <div class="lg:p-8 lg:pt-20 flex relative flex-col gap-4 p-6 pt-16 bg-white rounded-2xl">
            <div class="absolute lg:size-[5.13rem] size-[3.5rem] rounded-[0.75rem] lg:-top-8 -top-4 left-4">
              <img
                v-lazy="i.image"
                loading="lazy"
                class="size-full object-cover"
                :alt="i.title + ' contact'"
                :title="i.title + ' contact information'"
              />
            </div>
            <div class="font-medium lg:text-[1.25rem] text-[1rem] text-black">
              {{ i.title }}
            </div>
            <a class="font-medium lg:text-[1rem] text-[.75rem] text-[#999999] cursor-pointer" :href="i.href">
              {{ i.name }}
            </a>
          </div>
        </div>
      </div>
    </div>
    <!--  -->
    <!--  -->
    <!--  -->
    <div
      class="w-full lg:h-[20.81rem] aspect-[23/10] bg-[url('https://cd.sealmg.com/assets/img/bj_contact.png')] bg-no-repeat bg-center bg-cover lg:p-0 p-4"
    >
      <div class="mx-auto max-w-7xl h-full">
        <div class="lg:grid-cols-3 lg:gap-8 grid grid-cols-1 gap-4 items-center h-full">
          <div class="flex flex-col col-span-1 gap-4">
            <div class="font-semibold lg:text-[1.5rem] text-[1rem] text-white">- Follow Us</div>
            <p class="lg:text-[1rem] text-white text-[0.75rem] capitalize">
              Get to know us better through our social channels and see what goes on at SEALMG
            </p>
          </div>
          <div class="max-lg:justify-around flex col-span-2 gap-4 items-center">
            <!-- <div
              class="size-[2.13rem] ] bg-[#FFFFFF] cursor-pointer"
              v-for="(i, index) in 4"
              :key="index"
            ></div> -->
            <LazyH5share type="3"></LazyH5share>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    layout: 'newsHome',
    name: 'contact-us',
    loading: true,
    data() {
      return {
        list: []
      }
    },
    head: {
      title: 'Contact Us - SEALMG',
      meta: [
        {
          hid: 'description',
          name: 'description',
          content:
            'Need help? You can connect with our friendly support team. With fast transactions, great deals, and reliable customer service, SEALMG ensures a seamless shopping experience for all your gaming and digital needs!'
        }
      ]
    },
    watch: {},
    mounted() {},
    created() {},
    async asyncData() {
      return {
        list: [
          {
            title: 'Support',
            image: 'https://cd.sealmg.com/assets/img/contact-us1.png',
            name: 'tikeyunying@gmail.com',
            href: 'mailto:tikeyunying@gmail.com'
          },
          {
            title: 'Partnership',
            image: 'https://cd.sealmg.com/assets/img/contact-us2.png',
            name: 'tikeyunying@gmail.com',
            href: 'mailto:tikeyunying@gmail.com'
          }
        ]
      }
    },
    computed: {
      userInfo() {
        return this.$cookies.get('userInfo') || this.$store.state.user.userInfo || {}
      }
    },
    methods: {
      hrefs(name) {
        return `mailto${name}`
      },
      openCustomerService() {
        const customerServiceConfig = {
          token: 'fa44bc9b569378ccef22547d83506825',
          baseUrl: 'https://chat.sealmg.com/chat/index',
          defaultAvatar: 'https://cd.sealmg.com/assets/img/avator-img.png'
        }
        const chatParams = {
          token: customerServiceConfig.token,
          uid: this.userInfo?.uid || '',
          nickName: this.userInfo?.nickname || '',
          phone: '',
          sex: '1',
          avatar: this.userInfo?.avatar || customerServiceConfig.defaultAvatar,
          openid: ''
        }
        const queryString = new URLSearchParams(chatParams).toString()
        const chatUrl = `${customerServiceConfig.baseUrl}?${queryString}`
        window.open(chatUrl, '_blank')
      }
    }
  }
</script>
<style lang="less" scoped></style>
